@import '@/common/css/navTop.scss';
.index {
	.indexHead {
		background: linear-gradient(#14a2ff, #267dff);
		.ih_main {
			color: #fff;
			.status {
				display: flex;
				align-items: center;
				justify-content: center;
				image {
					width: 34upx;
					height: 34upx;
					margin-right: 20upx;
				}
			}
			.time {
				padding-top: 21upx;
				padding-bottom: 59upx;
				// margin-left: 10upx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff8f8;
				font-size: 24upx;
				text {
					margin-right: 10upx;
				}
			}
		}
	}
	.order_main {
		background-color: #fff;
		padding: 30upx;
		margin-bottom: 16upx;
		.orderH {
			font-size: 28upx;
			display: flex;
			justify-content: space-between;
			padding: 0 0 30upx;
			.left {
				text {
					font-size: 32upx;
					color: #333333;
					font-weight: bold;
				}
			}
			.right {
				color: #267dff;
				font-size: 28upx;
			}
			.overdue {
				color: #999999;
			}
		}
		.main {
			display: flex;
			// align-items: flex-start;
			width: 100%;
			// padding-bottom: 30upx;
			// border-bottom: 1px solid #EEEEEE;
			.mainLeft {
				display: inline-block;
				vertical-align: middle;
				font-size: 0;
				width: 168upx;
				height: 168upx;
				image {
					width: 168upx;
					height: 168upx;
					border-radius: 5px;
				}
			}
			.mainRight {
				display: inline-block;
				vertical-align: middle;
				margin-left: 20upx;
				width: calc(100% - 188upx);
				// height: 168upx;
				.rightMain {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 100%;
					.tit {
						font-size: 30upx;
						font-weight: bold;
						color: #333333;
						// height: 84upx;
					}
					.des {
						margin-top: 10upx;
						font-size: 12px;
						color: #999999;
					}
					.wraf {
						margin-top: 20upx;
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						.time {
							font-size: 24upx;
							color: #ff4040;
						}
						.price {
							font-size: 32upx;
							color: #333333;
						}
						.overdue {
							color: #999999;
						}
					}
				}
			}
			.button {
				text-align: right;
				padding-top: 24upx;
				text {
					font-size: 24upx;
					padding: 12upx 0;
					width: 138upx;
					display: inline-block;
					text-align: center;
				}
				.pay {
					border: 1px solid #267dff;
					background-color: #267dff;
					border-radius: 30px;
					color: #fff;
				}
				.see {
					border: 1px solid #267dff;
					border-radius: 30px;
					color: #267dff;
				}
			}
		}
	}

	.details-card {
		position: relative;
		// padding: 0 32upx 132upx;
		margin-top: 16upx;
		.dc-main {
			background: #ffffff;
			// border-radius: 8px;
			padding: 32upx 24upx;
			.dcm-con {
				padding-bottom: 32upx;
				.dcm-title {
					font-size: 32upx;
					font-weight: bold;
					color: #333333;
				}
				.item {
					display: flex;
					flex-wrap: nowrap;
					// justify-content: space-between;
					align-items: flex-start;
					padding-top: 32upx;
					font-size: 28upx;
					.i-left {
						width: 22%;
						color: #999999;
					}
					.i-right {
						width: 74%;
						color: #333333;
						image {
							margin-left: 10upx;
							width: 28upx;
							height: 28upx;
						}
					}
				}
			}
			.pay {
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				padding-top: 32upx;
				border-top: 1px solid #eee;
				.p-left {
					color: #999999;
				}
				.p-right {
					color: #ff4040;
				}
			}
		}
	}

	.order-bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		height: 100upx;
		border-top: 1px solid #f1f1f1;
		.ob-main {
			font-size: 26upx;
			position: absolute;
			right: 32upx;
			top: 50%;
			transform: translate(0, -50%);
			view {
				display: inline-block;
				vertical-align: middle;
				padding: 16upx 0;
				border-radius: 30px;
				width: 180upx;
				text-align: center;
				margin-left: 16upx;
			}
			.chakan {
				color: #267dff;
				border: 1px solid #267dff;
				box-sizing: border-box;
			}
			.fanhui {
				background-color: #267dff;
				border: 1px solid #267dff;
				box-sizing: border-box;
				color: #ffffff;
			}
		}
	}
}
